import { useState, forwardRef, useImperativeHandle, useRef } from 'react'
import { Modal } from 'antd';

function Dialog(props, ref) {
    const { onSuccess, item = {}, successFn, children, title, width = '60%', style } = props
    const [visible, setVisible] = useState(false)
    const [titleState, setTitle] = useState('')
    // modal的显示与隐藏
    const showModal = (title) => {
        setVisible(true)
        setTitle(title || '')
    }
    const hideModal = () => {
        setVisible(false)
    }

    useImperativeHandle(ref, () => ({
        showModelRef: showModal,
        hideModelRef: hideModal
    }))

    const handleClose = () => {
        hideModal();
        // let num = 100;
        // successFn(num)  //注意这里。successFn是父组件的方法，这里把num的值传出去
    }

    return (
        <Modal
            width={width}
            footer={null}
            open={visible}
            maskClosable={false}
            onCancel={handleClose}
            destroyOnClose={true}
            title={titleState || title}
            style={style}
        >
            {children}
        </Modal>
    )
}

export default forwardRef(Dialog)
